<script setup lang="ts">
import { inject, ref } from 'vue'
import axios from 'axios'

const {
  baseUri,
  throughGatewayFlag
} = inject('pyImgHandlerIo') as any
const useMIPRef = ref(false)

const mipValRef = ref({
  ax: 10,
  sag: 0,
  cor: 0
})

const mipModeRef = ref('MinIP')
const mipOptions = [{
  label: 'MinIP',
  value: 'MinIP'
}, {
  label: 'Mip',
  value: 'Mip'
},
  {
    label: 'Mean',
    value: 'Mean'
  },
  {
    label: 'Sum',
    value: 'Sum'
  }
]

const sendMIP = async () => {
  const prefix = throughGatewayFlag ? `${baseUri}/image/` : `${baseUri}/`
  await axios.post(`${prefix}mipSetting`, {
    useMIP: useMIPRef.value,
    mipOption: {
      model: mipModeRef.value,
      value: mipValRef.value
    }
  })
}
</script>

<template>
  <el-drawer direction="rtl" size="400">
    <template #header>
      <h4>MIP</h4>
    </template>
    <template #default>
      <div>
        <el-radio-group v-model="mipModeRef">
          <el-radio v-for="item in mipOptions"
                    @change="sendMIP"
                    :value="item.value"
                    size="large">{{
              item.label
            }}
          </el-radio>
        </el-radio-group>
        <div v-for="item in ['ax','sag','cor']"
             :key="item"
             class="flex mb-[10px] items-center">
          <span class="w-[70px]">{{ item }}</span>
          <el-slider
            v-model="mipValRef[item]"
            show-input
            @input="sendMIP" />
          <span>mm</span>
        </div>

        <div class="flex justify-center mt-[50px]">
          <el-switch
            size="large"
            active-text="应用MIP"
            @change="sendMIP"
            v-model="useMIPRef" />
        </div>
      </div>
    </template>

  </el-drawer>
</template>

<style scoped>

</style>
